<template>
  <div class="main-box">
    <div class="table-box">
      <div class="area-search">
        <el-card>
          <el-form :model="searchForm" ref="searchForm">
            <el-row :gutter="1">
              <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="4">
                <el-form-item label="种类">
                  <el-select class="m-2" placeholder="请选择科室名称" v-model="onekind" @change="onekindChange">
                    <el-option v-for="item in kind" :key="item.value" :label="item.value" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="4">
                <el-form-item label="岗期">
                  <el-select class="m-2" v-model="onehedgeratio" placeholder="请选择科室名称" @change="onehedgeratioChange">
                    <el-option v-for="item in hedgeratio" :key="item.value" :label="item.value" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="4">
                <el-form-item label="危害因素">
                  <el-input v-model="PYM" placeholder="名称或拼音码"></el-input>
                </el-form-item>
              </el-col>
              <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="2">
                <el-button size="default" type="primary" class="ml10" @click="searchchaxun">
                  <el-icon style="margin-right: 5px"><Search /></el-icon>
                  查询
                </el-button>
              </el-col>
              <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="2">
                <el-button size="default" type="primary" class="ml10" @click="FenXiQuanBu">分析全部</el-button>
              </el-col>
              <el-col :xs="3" :sm="3" :md="3" :lg="3" :xl="2">
                <el-button size="default" type="primary" class="ml10">操作云端</el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <div class="area-other-table">
        <el-card class="area-other-table-card">
          <el-row :gutter="10">
            <div class="split-main">
              <splitpane :split-set="settingLR">
                <template #paneL>
                  <div class="left">
                    <Weihaiyinsuzuo></Weihaiyinsuzuo>
                  </div>
                </template>
                <template #paneR>
                  <splitpane :split-set="settingRi">
                    <template #paneL>
                      <div class="center">
                        <Weihaiyinsuzhong></Weihaiyinsuzhong>
                      </div>
                    </template>
                    <template #paneR>
                      <div class="right">
                        <subcomponentWeihaiyinsuyou></subcomponentWeihaiyinsuyou>
                      </div>
                    </template>
                  </splitpane>
                </template>
              </splitpane>
            </div>
          </el-row>
        </el-card>
      </div>
    </div>
    <el-dialog v-model="centerDialogVisible" title="分析结果" width="60%" align-center>
      <div
        style="height: 50vh; overflow: auto"
        v-html="m_StringValue != '' && m_StringValue != undefined ? m_StringValue.replace(/\n/g, '<br>') : ''"
      ></div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="centerDialogVisible = false"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import subcomponentWeihaiyinsuyou from "@/views/DataMaintenance/Hazardfactorsmaintain/subcomponent/Weihaiyinsuyou.vue";
import Weihaiyinsuzuo from "@/views/DataMaintenance/Hazardfactorsmaintain/subcomponent/Weihaiyinsuzuo.vue";
import Weihaiyinsuzhong from "@/views/DataMaintenance/Hazardfactorsmaintain/subcomponent/Weihaiyinsuzhong.vue";
import { dataWeihu } from "@/stores/datamaintenance/datatending";
import { ref, onMounted, reactive } from "vue";
import { GetFenXiWeiHaiYinSuport } from "@/api/modules/user";
import { ElMessage } from "element-plus";
import splitpane, { ContextProps } from "@/components/ReSplitPane";
const settingLR: ContextProps = reactive({
  minPercent: 10,
  defaultPercent: 30,
  split: "vertical"
});
const settingRi: ContextProps = reactive({
  minPercent: 20,
  defaultPercent: 70,
  split: "vertical"
});
// feat: 修复页面问题？？？？忘记了什么问题

const centerDialogVisible = ref(false);
const m_StringValue = ref<string>("");
const onekind = ref("粉尘");
const kind = ref([
  { value: "粉尘", label: "粉尘" },
  { value: "生物", label: "生物" },
  { value: "物理", label: "物理" },
  { value: "毒物", label: "读物" },
  { value: "特殊作业", label: "特殊作业" }
]);
const PYM = ref("");
const onehedgeratio = ref("在岗期间");
const hedgeratio = ref([
  { value: "在岗期间", label: "在岗期间" },
  { value: "离岗后", label: "离岗后" },
  { value: "离岗时", label: "离岗时" },
  { value: "上岗前", label: "上岗前" },
  { value: "复查", label: "复查" },
  { value: "应急", label: "应急" }
]);

const FenXiQuanBu = () => {
  GetFenXiWeiHaiYinSuport().then((res: any) => {
    console.log(res);
    if (res.Success === 0) {
      m_StringValue.value = res.Data.m_StringValue;
      if (m_StringValue.value == "" || m_StringValue.value == undefined) {
        return ElMessage({ type: "error", message: "分析结果为空" });
      } else {
        centerDialogVisible.value = true;
      }
    }
  });
};
const onekindChange = () => {
  dataWeihu().varietyChange(onekind.value);
  dataWeihu().workingarea(onekind.value, PYM.value);
  immediately();
};

const onehedgeratioChange = () => {
  dataWeihu().arbitrageChange(onehedgeratio.value);
  dataWeihu().GetSelWeiHaiYinSuDataChange();
};

const searchchaxun = () => {
  dataWeihu().workingarea(onekind.value, PYM.value);
  immediately();
};

const immediately = () => {
  onehedgeratioChange();
  dataWeihu().WeiHaiYinSuChange(onekind.value, PYM.value);
  dataWeihu().HospitalinquiryChange();
  dataWeihu().varietyChange(onekind.value);
  console.log(111);
};

onMounted(() => {
  dataWeihu().workingarea(onekind.value, PYM.value);

  immediately();
});

const searchForm = ref({});
</script>

<style scoped lang="scss">
// :deep element.style {
//   display: contents !important;
// }
// .aaa {
//   display: contents !important;
// }
.split-main {
  width: 100%;
  height: 100%;
  background: #f2f3f5;
}
.table-box {
  display: flex;
  overflow: hidden;
}
.area-search {
  margin-bottom: 10px;
  :deep(.el-form-item--default) {
    margin-bottom: 0;
  }
}
.area-other-table {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .area-other-table-card {
    width: 100%;
    height: 100%;
    :deep(.el-row) {
      width: 100%;
    }
  }
  :deep(.el-card__body) {
    display: flex;
    width: 100%;
    height: 100%;
    padding: 0;

    // display: contents;
    background-color: var(--el-bg-color-page);
    .left {
      width: 100%;
      height: 100%;
    }
    .center {
      width: 100%;
      height: 100%;
    }
    .right {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
